<template>
	<div class="container">
		<!-- 面包屑导航 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
			<el-breadcrumb-item>门店管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 门店状态 -->
		<!-- <p> <el-link type="primary">全部门店</el-link> <el-link type="primary">已上架</el-link> <el-link
				type="primary">已下架</el-link></p> -->
		<p><span>全部门店</span><span>已上架</span><span>已下架</span></p>
		<!-- 搜索表单 -->
		<el-row style="margin-top: 10px;">
			<el-form :inline="true" :model="queryInfo">
				<el-form-item label="门店名称:">
					<el-input v-model="queryInfo.keyword" clearable @clear="querySearchStoreList"
						placeholder="请输入门店名称"></el-input>
				</el-form-item>
				<el-form-item label="门店手机号:">
					<el-input clearable @clear="querySearchStoreList" v-model="queryInfo.phone"
						placeholder="请输入门店手机号"></el-input>
				</el-form-item>
				<el-form-item label="提交日期:">
					<el-date-picker v-model="date" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="querySearchStoreList">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<!-- 新增门店 -->
		<el-row style="margin-top: 10px;margin-bottom: 10px;">
			<el-button type="primary" size="medium" @click="addShop">新增门店</el-button>
		</el-row>
		<!-- 表格展示数据 -->
		<el-table :data="storeList" :cell-style="{ 'text-align': 'center' }"
			:header-cell-style="{fontSize: '14px', backgroundColor: '#a0fa92',color:'#0c1bf2','text-align': 'center' }"
			border style="width: 100%;">
			<el-table-column prop="shopName" label="门店">
			</el-table-column>
			<el-table-column prop="shopId" label="id">
			</el-table-column>
			<el-table-column prop="shopPhone" label="门店手机号">
			</el-table-column>
			<el-table-column prop="shopAddress" label="门店地址">
			</el-table-column>
			<el-table-column prop="shopDescribe" label="营业时间">
			</el-table-column>
			<el-table-column prop="shopCommunitySort" label="关联小区">
			</el-table-column>
			<el-table-column prop="salesVolume" label="订单总数">
			</el-table-column>
			<el-table-column prop="shopPassword" label="提交方式">
			</el-table-column>
			<el-table-column label="状态">
				<!-- prop="shopStatus" -->
				<template slot-scope="scope">
					<span v-if="scope.row.shopStatus=='1'" style="color: blueviolet;">上架中</span>
					<span v-else style="color: aqua;">已下架</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-link :underline="false" type="primary">门店管理</el-link>
					<el-link :underline="false" type="primary" @click="editShop(scope.row)">修改门店资料</el-link>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-row class="block" style="margin-top:10px ;">
			<!-- current-change选择页码时触发的事件，size-change页面展示条数发生变化时，触发的事件-->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-row>
		<!-- 新增门店对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close='cancel'>
			<el-form :model="shop">
				<el-form-item label="门店名称:" label-width="90px">
					<el-input v-model="shop.shopName" placeholder="请输入门店名称"></el-input>
				</el-form-item>
				<el-form-item label="门店手机号:" label-width="90px">
					<el-input v-model="shop.shopPhone" placeholder="请输入门店手机号"></el-input>
				</el-form-item>
				<el-form-item label="所属地区:" label-width="90px">
					<el-cascader v-model="address" placeholder="请选择" :options="citys"></el-cascader>
				</el-form-item>
				<el-form-item label="" label-width="90px">
					<el-input v-model="shop.shopAddress" placeholder="请输入详细地址"></el-input>
				</el-form-item>
				<el-form-item label="门店坐标:" label-width="90px">
					<el-button @click="getGeo">获取位置</el-button>
					<span v-show="shop.shopLongitude">{{shop.shopLatitude}},{{shop.shopLongitude}}</span>
				</el-form-item>
				<el-form-item label="营业时间:" label-width="90px">
					<el-input v-model="shop.shopDescribe" placeholder="请输入营业时间"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="updateShop">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				queryInfo: { //
					keyword: '',
					shopName: '',
					shopPhone: '',
					phone: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5
				},
				date: '', //日期数组
				total: 1,
				storeList: [], //门店信息数组
				dialogFormVisible: false, //门店对话框展示
				title: '门店新增',
				shop1: {
					shopAddress: '',
					shopCity: '',
					shopDescribe: '',
					shopDistrict: '',
					shopImage: '',
					shopLatitude: '',
					shopLongitude: '',
					shopName: '',
					shopPhone: '',
					shopProvince: ''
				},
				shop: {
					addTime: "",
					concernStatus: '',
					distance: '',
					salesVolume: '',
					shopAccount: '',
					shopAddress: "",
					shopCategoryList: '',
					shopCity: "",
					shopCommunitySort: '',
					shopDescribe: "",
					shopDistrict: "",
					shopGoodsList: '',
					shopId: '',
					shopImage: "",
					shopLatitude: "",
					shopLongitude: "",
					shopName: "",
					shopOrderCount: '',
					shopPassword: '',
					shopPhone: "",
					shopProvince: "",
					shopSort: '',
					shopStatus: '',
					shopUserId: '',
				},
				address: [], //省市区数组
				citys: citys,
				addOrUpdate: 1
			}
		},
		methods: {
			//获取门店位置
			getGeo() {
				if (!this.address[0]) {
					this.$message.error('请输入省市区地址');
					return false;
				}
				let add = this.address[0] + this.address[1] + this.address[2] + this.shop.shopAddress
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							key: '457886b5972a97e93fb9cdccebfd450f',
							address: 'add'
						}
					})
					.then(res => {
						let loc = res.data.geocodes[0].location
						// console.log(res.data.geocodes[0].location)
						this.shop.shopLongitude = loc.split(',')[1] //维度
						this.shop.shopLatitude = loc.split(',')[0] //经度
					})
			},
			//去修改页面
			editShop(row) {
				this.dialogFormVisible = true;
				this.title = '编辑门店';
				this.addOrUpdate = 2;
				this.shop = row;
				this.address = [row.shopProvince, row.shopCity, row.shopDistrict]
			},
			//添加
			addShop() {
				this.dialogFormVisible = true;
				this.title = '新增门店';
				this.addOrUpdate = 1;
			},
			//修改或添加
			updateShop() {
				if (this.addOrUpdate == 1) {
					this.$http.post('shop/addShop', {
							shopAddress: this.shop.shopAddress,
							shopCity: this.shop.shopCity,
							shopDescribe: this.shop.shopDescribe,
							shopDistrict: this.shop.shopDistrict,
							shopImage: this.shop.shopImage,
							shopLatitude: this.shop.shopLatitude,
							shopLongitude: this.shop.shopLongitude,
							shopName: this.shop.shopName,
							shopPhone: this.shop.shopPhone,
							shopProvince: this.shop.shopProvince
						})
						.then(res => {
							if (res.data.status == 200) {
								this.querySearchStoreList();
								this.dialogFormVisible = false
								this.$message.success('操作成功！')
								this.cancel()
							} else {
								this.$message.error('操作失败！')
							}
						})
				} else {
					this.$http.post('shop/modifyShop', this.shop)
						.then(res => {
							if (res.data.status == 200) {
								this.querySearchStoreList();
								this.dialogFormVisible = false
								this.$message.success('操作成功！')
								this.cancel()
							} else {
								this.$message.error('操作失败！')
							}
						})
				}
			},
			cancel() {
				this.dialogFormVisible = false;
				this.shop = {
					addTime: "",
					concernStatus: '',
					distance: '',
					salesVolume: '',
					shopAccount: '',
					shopAddress: "",
					shopCategoryList: '',
					shopCity: "",
					shopCommunitySort: '',
					shopDescribe: "",
					shopDistrict: "",
					shopGoodsList: '',
					shopId: '',
					shopImage: "",
					shopLatitude: "",
					shopLongitude: "",
					shopName: "",
					shopOrderCount: '',
					shopPassword: '',
					shopPhone: "",
					shopProvince: "",
					shopSort: '',
					shopStatus: '',
					shopUserId: '',
				};
				this.address = [];

			},
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.queryInfo.pageSize = val;
				this.queryInfo.pageNum = 1;
				this.querySearchStoreList();
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.queryInfo.pageNum = val;
				this.querySearchStoreList();
			},
			//定义查询方法，调用接口获取数据
			querySearchStoreList() {
				this.$http.get('shop/querySearchShopList', {
						params: this.queryInfo
					})
					.then(res => {
						// console.log(res.data)
						if (res.data.status == 200) {
							this.storeList = res.data.data.list
							this.total = res.data.data.total
							console.log(this.storeList.length)
							// 遍历数数组获取
							// for (let it = 0; it < 5; it++) {
							// 	console.log(this.storeList[it])
							// 	if (it.shopStatus === '0') {
							// 		it.shopStatus = '已下架'
							// 	} else if (it.shopStatus === '1') {
							// 		it.shopStatus = '上架中'
							// 	} else {
							// 		this.$message.error('数据异常');
							// 	}
							// }
						} else {
							this.$message.error('数据异常')
						}

					})
					.catch(err => {
						this.$message.error('接口数据异常！')
					})
			},

		},
		mounted() {
			this.querySearchStoreList()
		},
		watch: {
			//要求名称必须和变量名保持一致
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
			address() {
				this.shop.shopProvince = this.address[0];
				this.shop.shopCity = this.address[1];
				this.shop.shopDistrict = this.address[2];
			}
		}
	}
</script>

<style scoped>
	p span {
		font-size: 16px;
		margin-left: 15px;
		color: #0312b3;
	}

	p span:nth-child(1) {
		color: aqua;
	}

	p span:hover {
		color: aqua;
	}
</style>